import React from 'react';
import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  StyleSheet,
  ImageBackground,
} from 'react-native';

interface Goods {
  img: string;
  price: string;
}

const goods: Goods[] = [
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    price: '¥9.9',
  },
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/172629/29/53349/230394/6756ea32F025f3a56/b53b1246de5f2089.jpg',
    price: '¥3761',
  },
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/246855/14/27706/94197/6757cefaF231ab4ba/475b2e0114323e73.jpg',
    price: '¥4.32',
  },
  {
    img: 'https://img11.360buyimg.com/n2/s240x240_jfs/t1/199402/29/52619/26978/6756cb89F49485e6b/00ac2431961afde5.png',
    price: '¥6999',
  },
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    price: '¥199',
  },
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    price: '¥199',
  },
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    price: '¥199',
  },
  {
    img: 'https://m.360buyimg.com/seckillcms/jfs/t1/124588/9/32568/76562/648a881fF41c5e7ee/8c7c05048bd690be.jpg',
    price: '¥199',
  },
];

const SeckillGoods: React.FC = () => {
  return (
    <ImageBackground
      source={{
        uri: 'https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png',
      }}
      style={styles.container}
      imageStyle={styles.backgroundImage}
    >
      <View style={styles.content}>
        {/* 左侧区域 */}
        <View style={styles.leftContainer}>
          <Image
            source={{
              uri: 'https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png',
            }}
            style={styles.logo}
          />
          <Text style={styles.title}>限时低价</Text>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>去抢购</Text>
            <Image
              source={{
                uri: 'https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png',
              }}
              style={styles.arrowIcon}
            />
          </TouchableOpacity>
        </View>

        {/* 右侧商品列表 */}
        <View style={styles.rightContainer}>
          <FlatList
            data={goods}
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.goodsList}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => (
              <View style={styles.goodsItem}>
                <Image source={{ uri: item.img }} style={styles.goodsImage} />
                <Text style={styles.goodsPrice}>{item.price}</Text>
              </View>
            )}
          />
        </View>
      </View>
    </ImageBackground>
  );
};

export default SeckillGoods;

// 样式修改如下：
// 样式更新如下：
const styles = StyleSheet.create({
  container: {
    width: '96%',
    height: 95,
    borderRadius: 20,
    marginVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    overflow: 'hidden',
  },
  backgroundImage: {
    borderRadius: 20,
    resizeMode: 'cover',
  },
  content: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  leftContainer: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 10,
    paddingHorizontal: 8,
    paddingVertical: 5,
    width: 90,
  },
  logo: {
    width: 65,
    height: 25,
    resizeMode: 'contain',
  },
  title: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 14,
    marginBottom: 5,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 5,
    paddingHorizontal: 5,
    paddingVertical: 2,
  },
  buttonText: {
    color: '#fc4b43',
    fontSize: 12,
    fontWeight: 'bold',
    marginRight: 5,
  },
  arrowIcon: {
    width: 9,
    height: 9,
  },

  rightContainer: {
    width: 220,
    marginLeft: 10,
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
    height: 75,
  },
  goodsList: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 10,
    paddingVertical: 8,
  },
  goodsItem: {
    width: 75,
    marginRight: 12,
    alignItems: 'center',
  },
  goodsImage: {
    width: 75,
    height: 50,
    resizeMode: 'cover',
    borderRadius: 6,
    marginBottom: 5,
  },
  goodsPrice: {
    fontSize: 12,
    color: '#ff0000',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});
